<nz-card>
  <!--过滤查询-->
  <nz-row>
    <div class="searchItem">
      <label>直降促销</label>
      <input nz-input placeholder="请输入ID/名称" [(ngModel)]="query.name"/>
    </div>
    <div class="searchItem">
      <label>类型</label>
      <nz-select [(ngModel)]="query.type" nzPlaceHolder="请选择" [nzBackdrop]="true" nzAllowClear>
        <nz-option [nzValue]="1" nzLabel="满减"></nz-option>
        <nz-option [nzValue]="2" nzLabel="满折"></nz-option>
      </nz-select>
    </div>
    <div class="searchItem">
      <label>状态</label>
      <nz-select [(ngModel)]="query.status" nzPlaceHolder="请选择" [nzBackdrop]="true" nzAllowClear>
        <nz-option [nzValue]="5" nzLabel="草稿"></nz-option>
        <nz-option [nzValue]="1" nzLabel="未开始"></nz-option>
        <nz-option [nzValue]="2" nzLabel="进行中"></nz-option>
        <nz-option [nzValue]="3" nzLabel="已结束"></nz-option>
        <nz-option [nzValue]="4" nzLabel="已停止"></nz-option>
      </nz-select>
    </div>
    <div class="searchItem">
      <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
      <button nz-button nzType="default" (click)="resetCondition()">重置</button>
    </div>
  </nz-row>
  <nz-row>
    <button nz-button nzType="primary" routerLink="/recharge/rechargePromotionEdit">新增直降促销</button>
  </nz-row>
  <!--表格-->
  <nz-table
    #rowSelectionTable
    nzSize="small"
    nzTableLayout="fixed"
    nzShowSizeChanger
    nzShowQuickJumper
    nzOuterBordered
    [nzData]="listOfData.records"
    [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
    [nzTotal]="listOfData.total"
    [(nzPageIndex)]="query.page"
    [(nzPageSize)]="query.pageSize"
    [nzFrontPagination]="false"
    [nzShowTotal]="totalTemplate"
    (nzPageIndexChange)="onPageIndexChange($event)"
    (nzPageSizeChange)="onPageSizeChange($event)"
  >
    <thead>
    <tr>
      <th nzAlign="center" [nzWidth]="'100px'">ID</th>
      <th nzAlign="center">名称</th>
      <th nzAlign="center">类型</th>
      <th nzAlign="center">适用用户</th>
      <th nzAlign="center">开始时间</th>
      <th nzAlign="center">结束时间</th>
      <th nzAlign="center">备注</th>
      <th nzAlign="center">状态</th>
      <th nzAlign="center" nzWidth="250px">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of rowSelectionTable.data;let index=index;">
      <td nzAlign="center">{{ data['id'] }}</td>
      <td nzAlign="center">{{ data['name'] }}</td>
      <td nzAlign="center">{{ rechargeService.TYPE[data['type']] }}</td>
      <td nzAlign="center">{{ rechargeService.USERTYPE[data['userType']] }}</td>
      <td nzAlign="center">{{ data['beginTime'] }}</td>
      <td nzAlign="center">{{ data['endTime'] }}</td>
      <td nzAlign="center">{{ data['remark'] }}</td>
      <td nzAlign="center">{{ rechargeService.STATUS[data['status']] }}</td>

      <td nzAlign="center" class="options">
        <a [routerLink]="['/recharge/rechargePromotionDetail']" [queryParams]="{id: data['id']}">查看</a>
        <a *ngIf="[1,5].includes(data['status'])" [routerLink]="['/recharge/rechargePromotionEdit']" [queryParams]="{id: data['id']}">编辑</a>
        <a [routerLink]="['/recharge/rechargePromotionEdit']" [queryParams]="{id: data['id'],isCopy: true}">复制</a>
        <a *ngIf="[5].includes(data['status'])" (click)="changeStatus(data['id'],1)">发布</a>
        <a *ngIf="[4].includes(data['status'])" (click)="changeStatus(data['id'],2)">启用</a>
        <a *ngIf="[2].includes(data['status'])"  (click)="changeStatus(data['id'],4)">停用</a>
        <a *ngIf="[2,3,4].includes(data['status'])" (click)="showTrack(data['id'])">直降记录</a>
        <a style="color: #F56C6C"
           nzPopconfirmPlacement="top"
           nz-popconfirm
           nzPopconfirmTitle="确认要删除该数据吗?"
           nzOkText="确认"
           nzCancelText="取消"
           (nzOnConfirm)="deleteRow(data['id'])">删除</a>
      </td>
    </tr>
    </tbody>
  </nz-table>
  <!-- 分页template -->
  <ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>

  <!--直降记录-->
  <nz-modal nzWidth="1200px"
            [nzVisible]="trackModal.visible"
            nzTitle="直降促销记录"
            nzCancelText="关闭"
            [nzOkText]="null"
            (nzOnCancel)="hideTrackModal()">
    <div *nzModalContent>
      <!--过滤查询-->
      <nz-row>
        <div class="searchItem">
          <label>订单编号</label>
          <input nz-input placeholder="请输入订单编号" [(ngModel)]="trackModal.query.orderNum"/>
        </div>
        <div class="searchItem">
          <label>用户ID</label>
          <input nz-input placeholder="请输入用户ID" [(ngModel)]="trackModal.query.userId"/>
        </div>
        <div class="searchItem">
          <label>订单状态</label>
          <nz-select [(ngModel)]="trackModal.query.status" nzMode="multiple"
                     [nzMaxTagCount]="1" nzPlaceHolder="请选择" [nzBackdrop]="true" nzAllowClear>
            <nz-option *ngFor="let status of orderStatus;let index=index" [nzValue]="index" [nzLabel]="status"></nz-option>
          </nz-select>
        </div>
        <div class="searchItem">
          <label>下单时间</label>
          <nz-range-picker nzFormat="yyyy-MM-dd" [(ngModel)]="trackModal.query.time"></nz-range-picker>
        </div>
        <div class="searchItem">
          <label>付款时间</label>
          <nz-range-picker nzFormat="yyyy-MM-dd" [(ngModel)]="trackModal.query.payTime"></nz-range-picker>
        </div>
        <div class="searchItem">
          <button nz-button nzType="primary" (click)="queryTrackBtn()">查询</button>
          <button nz-button nzType="default" (click)="resetTrackCondition()">重置</button>
        </div>
      </nz-row>
      <!--表格-->
      <nz-table
        #rowSelectionTable
        nzSize="small"
        nzTableLayout="fixed"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzData]="trackModal.listOfData.records"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="trackModal.listOfData.total"
        [(nzPageIndex)]="trackModal.query.page"
        [(nzPageSize)]="trackModal.query.pageSize"
        [nzFrontPagination]="false"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onTrackPageIndexChange($event)"
        (nzPageSizeChange)="onTrackPageSizeChange($event)"
      >
        <thead>
        <tr>
          <th nzAlign="center">订单编号</th>
          <th nzAlign="center">订单状态</th>
          <th nzAlign="center">用户ID</th>
          <th nzAlign="center">应付金额</th>
          <th nzAlign="center">实付金额</th>
          <th nzAlign="center">实付爱豆</th>
          <th nzAlign="center">直降优惠</th>
          <th nzAlign="center">下单时间</th>
          <th nzAlign="center">付款时间</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of rowSelectionTable.data;let index=index;">
          <td nzAlign="center">{{ data['orderNum'] }}</td>
          <td nzAlign="center">{{ orderStatus[data['status']] }}</td>
          <td nzAlign="center">{{ data['userId'] }}</td>
          <td nzAlign="center">{{ data['totalPrice'] }}</td>
          <td nzAlign="center">{{ data['realPrice'] }}</td>
          <td nzAlign="center">{{ data['aiDouAmount'] }}</td>
          <td nzAlign="center">{{ data['discountValue'] }}</td>
          <td nzAlign="center">{{ data['orderTime'] }}</td>
          <td nzAlign="center">{{ data['payTime'] }}</td>
        </tr>
        </tbody>
      </nz-table>
      <!-- 分页template -->
      <ng-template #totalTemplate let-total>共有 {{ trackModal.listOfData.total }} 条</ng-template>
    </div>
  </nz-modal>

</nz-card>
